<script>
import XuanHeader from "@/components/header/XuanHeader.vue"; // 页头
import XuanFooter from "@/components/footer/XuanFooter.vue"; // 页脚
export default {
  components: {
    XuanHeader, // 页头
    XuanFooter, // 页脚
  },
  el: "app",
  data() {
    return {};
  },
  watch: {},
  created() {
    this.loadingMethod(0, true); // 顶部进度条加载动画
  },
  mounted() {},
  methods: {
    /**
     * 顶部进度条加载动画
     *
     * @param {number} time 加载使用的时间（单位：毫秒）
     * @param {boolean} status 加载完成后的状态（true:成功。false:失败）
     */
    loadingMethod(time, status) {
      this.$Loading.start(); // 进度条加载开始
      setTimeout(() => {
        if (status) {
          this.$Loading.finish(); // 进度条加载完成
        } else {
          this.$Loading.error(); // 进度条加载失败
        }
      }, time);
    },
  },
};
</script>

<template>
  <div class="index">
    <!-- 页头 -->
    <div class="header">
      <XuanHeader />
    </div>

    <!-- 界面 -->
    <div class="interface">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <XuanFooter />
    </div>

    <!-- 返回顶部 -->
    <div>
      <el-backtop :right="40" :bottom="40" class="mouse" />
    </div>
  </div>
</template>

<style scoped lang="less">
.index {
  // min-width: 1300px;

  .header {
  }

  .interface {
    min-height: 100vh;
    padding-top: 80px;
    background-color: rgb(249, 249, 249);
  }

  .footer {
  }
}
</style>
<style scoped>
@media (max-width: 375px) {
  .prediction {
    display: none !important;
  }
}
@media (min-width: 375px) and (max-width: 576px) {
  .prediction {
    display: none !important;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .prediction {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .prediction {
    display: none;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .prediction {
    display: none;
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  /* color:#531dab */
  background: #531dab;
  border-color: #531dab;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
::v-deep .el-select__wrapper.is-focused {
  border-color: #531dab;
  box-shadow: 0 0 0 1px #531dab !important;
}
::v-deep .el-select__caret {
  color: #531dab;
}
/* Modify hover color */
.el-select-dropdown__item:hover {
  background-color: #f5f5f5;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #531dab;
  border-color: #531dab;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
::v-deep .el-select__wrapper.is-focused {
  border-color: #531dab;
  box-shadow: 0 0 0 1px #531dab !important;
}
::v-deep .el-select__caret {
  color: #531dab;
}
::v-deep .el-select-dropdown__item:hover {
  background-color: #531dab;
  color: #fff; /* Optional: change text color */
}

/* Additional styles for other elements */
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #531dab;
  border-color: #531dab;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
::v-deep .el-select__wrapper.is-focused {
  border-color: #531dab;
  box-shadow: 0 0 0 1px #531dab !important;
}
::v-deep .el-select__caret {
  color: #531dab;
}
::v-deep .el-checkbox-button__inner:hover {
  color: #531dab;
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: #531dab;
  border-color: #531dab;
  color: #fff;
}
::v-deep .el-radio-button__inner:hover {
  color: #531dab;
}
::v-deep .el-select-dropdown__item .is-selected {
  background-color: #531dab !important;
  color: #000 !important;
}
</style>
